<div class="a">返回</div>
<p class="b"></p>
<p class="c"></p>

<p class="e"></p>
<script>

  document.querySelector('div').addEventListener('click',function () {
    try {
      window.postMessage(JSON.stringify({
        source: 'tem-h5-navigate',
        pathKey: 'Home',
        type: 'back',
        data: {msg: 21312}
      }));
      console.log('post message is already exist')
    } catch (e) {
      console.log(e)
    }
  })

  document.addEventListener('message', function (data) {
    let dd
    try{
      dd = JSON.parse(data.data);
      document.querySelector('.e').innerText = 'succ';
    }catch (e) {
      document.querySelector('.e').innerText = 'err';
    }
    document.querySelector('.b').innerHTML = dd.url;//JSON.stringify(data.data);
    document.querySelector('.c').innerText = data.data;
  })

  const aaa = document.createElement("div");
  aaa.style= `
    position: absolute;
    top: 100px;
    left: 20px;
    width: 30px;
    height: 30px;
    background-color: #0b6fa2;
  `;
  aaa.onclick = function () {
    try {
      window.postMessage(JSON.stringify({
        source: 'tem-h5-navigate',
        pathKey: 'Home',
        type: 'back',
        data: {msg: 21312}
      }));
      console.log('post message is already exist')
    } catch (e) {
      console.log(e)
    }
  }
  document.body.appendChild(aaa)
</script>

<style>
  .a{
    padding: 100px;
    text-align: center;
  }
  div:active{
    background: #0b6fa2;
  }
  p {
   text-align: center;
  }
  .aaa{
    position: absolute;
    top: 100px;
    left: 20px;
    width: 30px;
    height: 30px;
    background-color: #0b6fa2;
  }
</style>
